<template>
  <div class="app-container2 pinggu_jieguo_wrap">
    <div class="jieguo_list">
      <div class="jieguo_item">
        <div class="jieguo_title">
          <div class="jieguo_title_01">模块级</div>
          <div class="jieguo_title_02">健康设备直方图</div>
        </div>
        <div class="jieguo_chart">
          <barCharts :echartsData="chartsData4" />
        </div>
      </div>
      <div class="jieguo_item">
        <div class="jieguo_title">
          <div class="jieguo_title_01">模块级</div>
          <div class="jieguo_title_02">健康度变化趋势</div>
        </div>
        <div class="jieguo_chart">
          <lineCharts :echartsData="chartsData1" />
        </div>
      </div>
    </div>
    <div class="jieguo_list">
      <div class="jieguo_item">
        <div class="jieguo_title">
          <div class="jieguo_title_01">系统级</div>
          <div class="jieguo_title_02">健康设备直方图</div>
        </div>
        <div class="jieguo_chart">
          <barCharts :echartsData="chartsData5" />
        </div>
      </div>
      <div class="jieguo_item">
        <div class="jieguo_title">
          <div class="jieguo_title_01">系统级</div>
          <div class="jieguo_title_02">健康变化趋势</div>
        </div>
        <div class="jieguo_chart">
          <lineCharts :echartsData="chartsData2" />
        </div>
      </div>
    </div>
    <div class="jieguo_list">
      <div class="jieguo_item">
        <div class="jieguo_title">
          <div class="jieguo_title_01">DCS</div>
          <div class="jieguo_title_02">实时变化趋势</div>
        </div>
        <div class="jieguo_chart">
          <lineCharts :echartsData="chartsData3" />
        </div>
      </div>
      <div class="jieguo_item">
        <div class="jieguo_title">
          <div class="jieguo_title_01">DCS</div>
          <div class="jieguo_title_02">实时健康度仪表盘</div>
        </div>
        <div class="jieguo_chart">
          <gaugeCharts />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import barCharts from "./components/barCharts.vue";
import lineCharts from "./components/lineCharts.vue";
import gaugeCharts from "./components/gaugeCharts.vue";
export default {
  components: {
    lineCharts,
    barCharts,
    gaugeCharts,
  },
  data() {
    return {
      chartsData1: {
        arr: [
          {
            name: "10:00",
            value: 70,
          },
          {
            name: "12:00",
            value: 80,
          },
          {
            name: "14:00",
            value: 90,
          },
          {
            name: "16:00",
            value: 100,
          },
          {
            name: "18:00",
            value: 40,
          },
          {
            name: "20:00",
            value: 38,
          },
          {
            name: "22:00",
            value: 20,
          },
        ],
      },
      chartsData2: {
        arr: [
          {
            name: "00:00",
            value: 20,
          },
          {
            name: "02:00",
            value: 50,
          },
          {
            name: "04:00",
            value: 10,
          },
          {
            name: "06:00",
            value: 58,
          },
          {
            name: "08:00",
            value: 74,
          },
          {
            name: "10:00",
            value: 88,
          },
          {
            name: "12:00",
            value: 46,
          },
        ],
      },
      chartsData3: {
        arr: [
          {
            name: "11:00",
            value: 65,
          },
          {
            name: "12:00",
            value: 3,
          },
          {
            name: "13:00",
            value: 33,
          },
          {
            name: "14:00",
            value: 15,
          },
          {
            name: "15:00",
            value: 51,
          },
          {
            name: "16:00",
            value: 28,
          },
          {
            name: "17:00",
            value: 44,
          },
        ],
      },
      chartsData4: {
        arr: [
          {
            name: "设备1",
            value: 70,
          },
          {
            name: "设备2",
            value: 80,
          },
          {
            name: "设备3",
            value: 90,
          },
          {
            name: "设备4",
            value: 100,
          },
          {
            name: "设备5",
            value: 40,
          },
          {
            name: "设备6",
            value: 38,
          },
          {
            name: "设备7",
            value: 20,
          },
          {
            name: "设备8",
            value: 78,
          },
          {
            name: "设备9",
            value: 68,
          },
        ],
      },
      chartsData5: {
        arr: [
          {
            name: "设备1",
            value: 111,
          },
          {
            name: "设备2",
            value: 11,
          },
          {
            name: "设备3",
            value: 28,
          },
          {
            name: "设备4",
            value: 57,
          },
          {
            name: "设备5",
            value: 66,
          },
          {
            name: "设备6",
            value: 54,
          },
          {
            name: "设备7",
            value: 22,
          },
          {
            name: "设备8",
            value: 94,
          },
          {
            name: "设备9",
            value: 113,
          },
        ],
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.pinggu_jieguo_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .jieguo_list {
    width: 100%;
    height:  32.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .jieguo_item {
      width: 49.6%;
      height: 100%;
      display: flex;
      background: #0e2344;
      box-sizing: border-box;
      border: 2px solid #122e5b;
      padding: 15px;
      .jieguo_title {
        width: 180px;
        flex: 0 0 auto;
        font-size: 22px;
        color: #cccccc;
        .jieguo_title_02 {
          margin-top: 5px;
        }
      }
      .jieguo_chart {
        flex: 1 1 auto;
        width: 0;
        margin-left: 10px;
        height: 100%;
      }
    }
  }
}
</style>
